<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="orderRegister"
    @ok="confirmSubmit"
    @close="drawerReset"
    width="1000"
    title="订单详情"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="drawer-order">
      <div class="order-detail">
        <div class="global-drawer-title">基本信息</div>
        <div class="detail-desc">
          <div class="desc-item">
            <div class="item-box">
              <div class="box-label">订单编号</div>
              <div class="box-value">{{ drawerInfo.record.buyNo || '--' }}</div>
            </div>
            <div class="item-box" v-if="drawerInfo.record.orderStatus !== '1'">
              <div class="box-label">订单金额</div>
              <div class="box-value" v-if="drawerInfo.record.payAmt == 0">0</div>
              <div class="box-value" v-else>{{ drawerInfo.record.payAmt || '--' }}</div>
            </div>
            <div class="item-box">
              <div class="box-label">用户手机号</div>
              <div class="box-value">{{ drawerInfo.record.phoneNumber || '--' }}</div>
            </div>
            <div class="item-box" v-if="drawerInfo.record.orderStatus !== '1'">
              <div class="box-label">缴款方式</div>
              <div class="box-value" v-if="drawerInfo.record.payType == 'alipay'">支付宝支付</div>
              <div class="box-value" v-else-if="drawerInfo.record.payType == 'wechat'">微信支付</div>
              <div class="box-value" v-else-if="drawerInfo.record.payType == 'wechat-pro'">小程序支付</div>
              <div class="box-value" v-else-if="drawerInfo.record.payType == 'offline'">线下支付</div>
              <div class="box-value" v-else>--</div>
            </div>
            <div class="item-box">
              <div class="box-label">下单时间</div>
              <div class="box-value">{{ drawerInfo.record.createTime || '--' }}</div>
            </div>
            <div class="item-box" v-if="drawerInfo.record.orderStatus !== '1' || drawerInfo.record.orderStatus !== '4'">
              <div class="box-label">付款时间</div>
              <div class="box-value">{{ drawerInfo.record.payTime || '--' }}</div>
            </div>
            <div class="item-box">
              <div class="box-label">关联企业名称</div>
              <div class="box-value">{{ drawerInfo.record.enterpriseName || '--' }}</div>
            </div>
            <div class="item-box">
              <div class="box-label">关联企业税号</div>
              <div class="box-value">{{ drawerInfo.record.taxNo || '--' }}</div>
            </div>
            <div class="item-box" v-if="drawerInfo.record.orderStatus === '2' && drawerInfo.record.orderType === '1'">
              <div class="box-label">原订单号</div>
              <div class="box-value">{{ drawerInfo.record.associateBuyNo || '--' }}</div>
            </div>
            <div class="item-box" v-if="drawerInfo.record.orderStatus === '4'">
              <div class="box-label">退款订单号</div>
              <div class="box-value">{{ drawerInfo.record.associateBuyNo || '--' }}</div>
            </div>
            <div class="item-box" v-if="drawerInfo.record.orderStatus === '2' && drawerInfo.record.orderType === '1'">
              <div class="box-label">退单时间</div>
              <div class="box-value">{{ drawerInfo.record.createTime || '--' }}</div>
            </div>
          </div>
          <div class="desc-img">
            <img v-if="drawerInfo.record.orderStatus == 1" :src="waitPayImg" />
            <img
              v-else-if="drawerInfo.record.orderStatus == 2 && drawerInfo.record.orderType == '0'"
              :src="finishPayImg"
            />
            <img v-else-if="drawerInfo.record.orderStatus == 3" :src="closePayImg" />
            <img v-else-if="drawerInfo.record.orderStatus == 4" :src="cancelPayImg" />
            <img
              v-else-if="drawerInfo.record.orderStatus == 2 && drawerInfo.record.orderType == '1'"
              :src="refundImg"
            />
          </div>
        </div>
      </div>
      <div class="order-detail">
        <div class="global-drawer-title">服务信息</div>
        <div class="detail-desc">
          <div class="desc-item">
            <div class="item-box">
              <div class="box-label">套餐类型</div>
              <div class="box-value">{{ drawerInfo.record.packageName || '--' }}</div>
            </div>
            <div class="item-box" v-if="drawerInfo.record.feeType === 'CYCLE'">
              <div class="box-label">服务周期</div>
              <div class="box-value">{{ drawerInfo.record.score || '0' }}天</div>
            </div>
            <div class="item-box" v-else-if="drawerInfo.record.feeType === 'SCORE'">
              <div class="box-label">Pai豆数量</div>
              <div class="box-value">{{ drawerInfo.record.score || '--' }}</div>
            </div>
          </div>
          <div class="desc-empty"></div>
        </div>
      </div>
      <div class="order-detail" v-if="drawerInfo.record.orderStatus === '1'">
        <div class="global-drawer-title">付款信息</div>
        <div class="detail-pay">
          <a-form
            ref="formRef"
            :colon="false"
            autocomplete="off"
            :label-col="{ style: { width: '90px' } }"
            :model="formState"
            lableWidth
          >
            <div class="box-form">
              <a-form-item label="订单金额" name="payAmt">
                <a-statistic
                  :value="drawerInfo.record.payAmt"
                  :precision="2"
                  :value-style="{ color: '#192235', fontWeight: '600', fontSize: '14px' }"
                />
              </a-form-item>

              <a-form-item label="付款状态" name="payStatus">
                <div class="form-txt">待付款</div>
              </a-form-item>
              <a-form-item label="是否真实收费" name="realReceiveAmt">
                <a-radio-group v-model:value="formState.realReceiveAmt" @change="() => (formState.realOrderAmt = null)">
                  <a-radio :value="1">否</a-radio>
                  <a-radio :value="2">是</a-radio>
                </a-radio-group>
                <a-form-item-rest>
                  <a-input-number
                    v-if="formState.realReceiveAmt === 2"
                    id="inputNumber"
                    v-model:value="formState.realOrderAmt"
                    :min="1"
                    :max="2147483647"
                    class="none-handle"
                    :precision="0"
                    :disabled="formState.realReceiveAmt === 1"
                    placeholder="请输入实际收费金额"
                    :value-style="{ color: '#192235', fontWeight: '600', fontSize: '14px' }"
                    style="width: 200px"
                  />
                </a-form-item-rest>
              </a-form-item>
            </div>
          </a-form>
        </div>
      </div>
      <div class="order-detail" v-if="drawerInfo.record.orderStatus !== '1'">
        <div class="global-drawer-title">操作记录</div>
        <div class="detail-table">
          <a-table :columns="orderColumns" :dataSource="drawerInfo.record.operationList || []" :pagination="false">
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex === 'index'">
                {{ index + 1 }}
              </template>
              <template v-else-if="column.dataIndex === 'orderStatus'">
                <span class="global-wait-status" v-if="record.orderStatus == 1">待付款</span>
                <span class="global-active-status" v-else-if="record.orderStatus == 2">已完成</span>
                <span class="global-stop-status" v-else-if="record.orderStatus == 3">已关闭</span>
                <span class="global-error-status" v-else-if="record.orderStatus == 4">已失效</span>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <span v-if="record.operation == 1">创建订单</span>
                <span v-else-if="record.operation == 2">在线支付</span>
                <span v-else-if="record.operation == 3">线下支付</span>
                <span v-else-if="record.operation == 4">关闭订单</span>
                <span v-else-if="record.operation == 5">订单退回</span>
              </template>
              <template v-else-if="column.dataIndex === 'operationPlatform'">
                <span v-if="record.operationPlatform == 'saas'">saas平台</span>
                <span v-else-if="record.operationPlatform == 'applet'">小程序</span>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <template #centerFooter v-if="drawerInfo.record.orderStatus === '1'">
      <a-button :loading="btnLoading" @click="orderOperate('3')"> 取消订单 </a-button>
    </template>
    <template #centerFooter v-if="drawerInfo.record.orderStatus === '2' && drawerInfo.record.orderType === '0'">
      <a-button :loading="btnLoading" @click="orderOperate('4')"> 订单退回 </a-button>
    </template>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted, createVNode } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { message, Modal } from 'ant-design-vue'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import { formatMoney } from '@/utils/index'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import waitPayImg from '@/assets/images/waitPay.png'
import closePayImg from '@/assets/images/closePay.png'
import finishPayImg from '@/assets/images/finishPay.png'
import cancelPayImg from '@/assets/images/canceled.png'
import refundImg from '@/assets/images/refund.png'
import api from '@/api'

const { queryOrderDetail, orderOperation } = api

const emit = defineEmits(['operateSuccess', 'register'])

const btnLoading = ref(false)
const formState = reactive<any>({
  realReceiveAmt: 1,
  realOrderAmt: null //订单金额
})

const drawerInfo = reactive<any>({
  record: {}
})

const orderColumns = [
  {
    title: '序号',
    align: 'right',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus'
  },
  {
    title: '操作人',
    dataIndex: 'createBy'
  },
  {
    title: '操作内容',
    dataIndex: 'operation'
  },
  {
    title: '操作平台',
    dataIndex: 'operationPlatform'
  },
  {
    title: '操作时间',
    dataIndex: 'createTime'
  }
]

const [orderRegister, { closeDrawer, changeOkLoading, changeLoading }] = useDrawerInner(async (data: any) => {
  let record = cloneDeep(data.record)
  try {
    changeLoading(true)
    let res = await queryOrderDetail({ buyNo: record.buyNo })
    changeLoading(false)
    drawerInfo.record = res.result || {}
  } catch (error) {
    changeLoading(false)
  }
})

const drawerReset = () => {
  changeOkLoading(false)
  changeLoading(false)
  btnLoading.value = false
  drawerInfo.record = {}
  formState.realReceiveAmt = 1
  formState.realOrderAmt = null
}
// 订单操作
const orderOperate = async (operationType: string) => {
  let messageMap: any = {
    '3': {
      content: '取消订单将关闭当前订单，是否仍要继续此操作？',
      successMsg: '取消订单成功'
    },
    '4': {
      content: '退回订单将使当前权益失效，是否仍要继续此操作？',
      successMsg: '退回订单成功'
    }
  }
  Modal.confirm({
    title: '提示',
    centered: true,
    icon: createVNode(ExclamationCircleFilled),
    content: messageMap[operationType].content,
    autoFocusButton: null,
    class: 'modal-confirm-box',
    async onOk() {
      try {
        btnLoading.value = true
        await orderOperation({
          buyNo: drawerInfo.record.buyNo,
          operationType
        })
        message.success(messageMap[operationType].successMsg)
        closeDrawer()
        drawerReset()
        emit('operateSuccess')
      } catch (error) {
        btnLoading.value = false
      }
    },
    onCancel() {}
  })
}
// 提交数据
const confirmSubmit = async () => {
  try {
    let realPayAmt = 0
    if (formState.realReceiveAmt == 2) {
      if (!formState.realOrderAmt || formState.realOrderAmt == 0) {
        message.warning('请输入实际收费金额')
        return
      }
      realPayAmt = formState.realOrderAmt
    }
    changeOkLoading(true)
    await orderOperation({
      buyNo: drawerInfo.record.buyNo,
      operationType: '2',
      realPayAmt
    })
    message.success('付款成功')
    closeDrawer()
    drawerReset()
    emit('operateSuccess')
  } catch (error) {
    changeOkLoading(false)
  }
}
</script>

<style lang="less" scoped>
.drawer-order {
  padding: 8px;
  color: #192235;
  .order-detail {
    margin-bottom: 24px;
    .detail-desc {
      margin-top: 40px;
      padding-left: 40px;
      padding-right: 16px;
      display: flex;
      justify-content: space-between;
      .desc-item {
        display: flex;
        flex-wrap: wrap;
        .item-box {
          width: 350px;
          margin-bottom: 16px;
          margin-right: 16px;
          .box-label {
            font-weight: 500;
            font-size: 12px;
            color: #192236;
            margin-bottom: 6px;
          }
          .box-value {
            font-weight: 500;
            font-size: 14px;
            color: #192236;
            line-height: 16px;
            word-wrap: break-word;
            word-break: break-all;
          }
        }
      }
      .desc-empty {
        width: 130px;
        flex-shrink: 0;
      }
      .desc-img {
        margin-top: -16px;
        width: 130px;
        height: 126px;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .detail-table {
      margin-top: 40px;
    }
    .detail-pay {
      margin-top: 40px;
      .box-form {
        padding-left: 40px;
        .form-txt {
          font-weight: 500;
          font-size: 14px;
          color: #192236;
          line-height: 16px;
        }
      }
      :deep(.ant-form-item-label) {
        font-weight: 600;
        & > label {
          font-size: 12px;
          color: #192236;
        }
      }
      .none-handle {
        :deep(.ant-input-number-handler-wrap) {
          display: none;
        }
      }
    }
  }
}
</style>
